<template>
    <div class="banner_mange">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.bannerManage')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" @giveParentData="getAppList" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="showAdd" type="primary">{{ $t('common.add') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                        <el-table-column prop="name" :label="$t('operation.bannerName')" min-width="120"></el-table-column><!--名称-->
                        <el-table-column prop="remark" :label="$t('common.remark')" show-overflow-tooltip min-width="120">
                            <template slot-scope="{ row }">{{ row.remark ? row.remark : '--' }}</template>
                        </el-table-column><!--备注-->
                        <el-table-column prop="bannerUrl" :label="$t('operation.link')" show-overflow-tooltip min-width="160">
                            <template slot-scope="{ row }">{{ row.bannerUrl ? row.bannerUrl : '--' }}</template>
                        </el-table-column><!--链接-->
                        <el-table-column :label="$t('operation.releaseTime')" min-width="180"><!--发布时间-->
                            <template slot-scope="{ row }">{{ row.startTime ? row.startTime : '--' }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.endTime')" min-width="180"><!--结束时间-->
                            <template slot-scope="{ row }">{{ row.endTime ? row.endTime : '--' }}</template>
                        </el-table-column>
                        <el-table-column prop="position" :label="$t('operation.position')" min-width="120">
                            <template slot-scope="{row}">{{ $t('common.pageNo', { No: row.position}) }}</template>
                        </el-table-column><!--位置-->
                        <el-table-column prop="status" :label="$t('common.status')" min-width="120">
                            <template slot-scope="{ row }"><el-switch @change="handleStatusChange(row)" v-model="row.status" active-value="1" inactive-value="0"></el-switch></template>
                        </el-table-column><!--状态 0关闭 1开启-->
                        <el-table-column :label="$t('common.operation')" min-width="80"><!--操作-->
                            <template slot-scope="{row}">
                                <el-button @click="showEdit(row)" type="text">{{ $t('common.edit') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>

        <!--   编辑/添加 banner     -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="500px">
            <el-form ref="bannerForm" class="banner_form" :model="dialog.form" :rules="dialog.rules" label-position="right" label-width="130px">
                <!-- 名称 -->
                <el-form-item :label="$t('operation.bannerName')" prop="name">
                    <el-input v-model="dialog.form.name" :placeholder="$t('operation.bannerName')" maxlength="150"></el-input>
                </el-form-item>
                <!-- 链接 -->
                <el-form-item :label="$t('operation.link')" prop="link">
                    <el-input v-model="dialog.form.link" :placeholder="$t('operation.link')" maxlength="255"></el-input>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item :label="$t('common.remark')" prop="remark">
                    <el-input v-model="dialog.form.remark" :placeholder="$t('common.remark')" maxlength="255"></el-input>
                </el-form-item>
                <!-- banner图 -->
                <el-form-item :label="$t('operation.bannerImg')" prop="banner" v-loading="showImgLoading">
<!--                    <el-input v-model="dialog.form.name" :placeholder="$t('operation.bannerName')"></el-input>-->
                    <upload-image v-if="!dialog.form.banner" v-model="dialog.bannerImg" :is-compress="true" :tips="$t('operation.bannerSize')"></upload-image>
                    <div v-if="dialog.form.banner" class="show_img">
                        <img :src="dialog.form.banner" @load="imgLoaded" @error="imgLoaded" alt="">
                        <span @click="deleteImg" class="el-icon-close"></span>
                    </div>
<!--                    <el-upload
                        v-model="dialog.form.banner"
                        action=""
                    ></el-upload>-->
                </el-form-item>
                <!-- 位置 -->
                <el-form-item :label="$t('operation.position')" prop="position">
<!--                    <el-input v-model="dialog.form.position" :placeholder="$t('operation.position')"></el-input>-->
                    <el-select v-model="dialog.form.position" :disabled="!Boolean(dialog.form.id)" :placeholder="$t('operation.position')" style="width: 100%;">
                        <el-option v-for="index in dialog.positionList" :key="index" :label="$t('common.pageNo', { No: index})" :value="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="submitBanner" type="primary">{{ $t('common.confirm') }}</el-button><!-- 确认 -->
                <el-button @click="dialog.show=false" type="default">{{ $t('common.cancel') }}</el-button><!-- 取消 -->
            </div>
        </el-dialog>
        <!--   编辑/添加 banner end     -->

    </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
[data-page=operation-banner-manage] {
    .banner_form {
        .upload_image {
            text-align: left;
        }
    }
}
</style>
<style lang="scss" scoped>
.show_img {
    position: relative;

    .el-icon-close {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        text-shadow: 0 0 3px #666;
        font-size: 26px;
        cursor: pointer;
    }
}
</style>
